<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Nilufar.Love.Clock</title>

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html {
			height: 100%;
		}

		body {
			height: 100%;
			background-color: black;
		}

		#draw {
			width: 100%;
			height: 100%;
		}
	</style>
</head>

<body>
	<canvas id="draw" ondblclick="fullscreen();"></canvas>
</body>

<script>
	function fullscreen() {
		if (document.fullscreenElement ||
			document.mozFullScreenElement ||
			document.webkitFullscreenElement ||
			document.msFullscreenElement) {
			if (document.exitFullscreen) {
				document.exitFullscreen();
			} else if (document.mozCancelFullScreen) {
				document.mozCancelFullScreen();
			} else if (document.webkitExitFullscreen) {
				document.webkitExitFullscreen();
			} else if (document.msExitFullscreen) {
				document.msExitFullscreen();
			}
		} else {
			if (document.documentElement.requestFullscreen) {
				document.documentElement.requestFullscreen();
			} else if (document.documentElement.mozRequestFullScreen) {
				document.documentElement.mozRequestFullScreen();
			} else if (document.documentElement.webkitRequestFullscreen) {
				document.documentElement.webkitRequestFullscreen();
			} else if (document.documentElement.body.msRequestFullscreen) {
				document.documentElement.body.msRequestFullscreen();
			}
		}
	}

	document.addEventListener('keypress', function (e) {
		fullscreen();
	});
</script>
<script type="text/javascript">
	var fps = 25;

	var c = document.getElementById('draw');
	var ctx = c.getContext("2d");
	c.style.backgroundColor = "#E7E6E6";
	var count = 0;
	var width = 0;
	var height = 0;
	var r = 0;
	var nx;
	var ny;

	var pc = document.createElement('canvas');
	var pctx = pc.getContext("2d");
	var grd;

	var hc = document.createElement('canvas');
	var hctx = hc.getContext("2d");
	var hw;
	var hh;
	var hro;
	var lhro;

	var mc = document.createElement('canvas');
	var mctx = mc.getContext("2d");
	var mw;
	var mh;
	var mro;
	var lmro;

	var sc = document.createElement('canvas');
	var sctx = sc.getContext("2d");
	var sw;
	var sh;
	var sro;
	var lsro;

	var run;

	function restart() {
		init();
		drawClockPanel();
		clearInterval(run);

		setTimeout(() => {
			run = setInterval(() => {
				refresh();
			}, 1000 / fps);
		}, (1000 - new Date().getMilliseconds()) % (1000 / fps));
	}


	window.onresize = restart;
	window.onpageshow = restart;
	window.onpagehide = () => clearInterval(run);

	function init() {
		fps = getQueryVariable("fps") ? getQueryVariable("fps") : 25;
		c.width = document.body.clientWidth;
		c.height = document.body.clientHeight;

		width = c.width;
		height = c.height;


		r = Math.min(width, height) * 0.4;
		nx = width / 2;
		ny = height / 2;

		ctx.font = r / 10 + "px Times New Roman";

		pc.width = width;
		pc.height = height;
		pctx.translate(nx, ny);
		grd = pctx.createRadialGradient(0, 0, r * 0.88, 0, 0, r);
		grd.addColorStop(0, "#ABABAB");
		grd.addColorStop(1, "#000000");

		hc.width = width;
		hc.height = height;
		hw = r / 15;
		hh = r * 0.4;
		hro = Math.PI / (21600 * fps);
		lhro = 0;
		hctx.translate(nx, ny);
		hctx.fillStyle = "#000000";


		mc.width = width;
		mc.height = height;
		mw = r / 20;
		mh = r * 0.6;
		mro = Math.PI / (1800 * fps);
		lmro = 0;
		mctx.translate(nx, ny);
		mctx.fillStyle = "#292929";

		sc.width = width;
		sc.height = height;
		sw = r / 30;
		sh = r * 0.8;
		sro = Math.PI / (30 * fps);
		lsro = 0;
		sctx.translate(nx, ny);
		sctx.fillStyle = "#3A3A3A";
	}

	function refresh() {
		reset();
		ctx.clearRect(-nx, -ny, width, height);
		ctx.drawImage(pc, 0, 0, width, height);

		drawText();
		drawHours();
		drawMinutes();
		drawSeconds();
		ctx.drawImage(hc, 0, 0, width, height);
		ctx.drawImage(mc, 0, 0, width, height);
		ctx.drawImage(sc, 0, 0, width, height);
		ctx.arc(nx, ny, r / 15, 0, Math.PI * 2, true);
		ctx.fill();
	}

	function reset() {
		let today = new Date();
		let h = today.getHours();
		let m = today.getMinutes();
		let s = today.getSeconds();
		let ss = today.getMilliseconds();

		hctx.rotate(-lhro);
		mctx.rotate(-lmro);
		sctx.rotate(-lsro);
		lhro = (((h * 60 + m) * 60 + s) * 1000 + ss) / (1000 / fps) * hro;
		lmro = ((m * 60 + s) * 1000 + ss) / (1000 / fps) * mro;
		lsro = (s * 1000 + ss) / (1000 / fps) * sro;
		hctx.rotate(lhro);
		mctx.rotate(lmro);
		sctx.rotate(lsro);
	}

	var drawHours = () => drawTimeRect(hctx, hro, -hw / 2, -hh, hw, hh);
	var drawMinutes = () => drawTimeRect(mctx, mro, -mw / 2, -mh, mw, mh);
	var drawSeconds = () => drawTimeRect(sctx, sro, -sw / 2, -sh, sw, sh);

	function drawTimeRect(context, angle, x, y, w, h) {
		context.clearRect(-nx, -ny, width, height);
		context.fillRect(x, y, w, h);
	}

	function drawText() {
		let today = new Date();

		let date = getDate(today);
		let week = getWeek(today);
		let time = getTime(today);
		let dl = ctx.measureText(date).width;
		let wl = ctx.measureText(week).width;
		let tl = ctx.measureText(time).width;
		ctx.fillText(date, (width - dl) / 2, ny - r * 0.6);	// 文字默认左下对齐
		ctx.fillText(week, (width - wl) / 2, ny + r * 0.4);	// 文字默认左下对齐
		ctx.strokeText(time, (width - tl) / 2, ny + r * 0.55 + r / 10 + r / 40);	// 文字默认左下对齐
	}

	function getDate(today) {
		return today.getFullYear() + "年" + (today.getMonth() < 9 ? "0" : "") + (today.getMonth() + 1) + "月" + today.getDate() + "日";
	}

	function getWeek(today) {
		let weeks = ["日", "一", "二", "三", "四", "五", "六"];
		return "星期" + weeks[today.getDay()];
	}

	function getTime(today) {
		let h = today.getHours();
		let m = today.getMinutes();
		let s = today.getSeconds();
		return (h < 10 ? "0" : "") + h + ":" + (m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s;
	}

	function drawClockPanel() {
		pctx.clearRect(-nx, -ny, width, height);
		pctx.strokeStyle = "#3B3838";	// 画笔色
		pctx.lineWidth = r / 20;
		pctx.arc(0, 0, r * 1.15, 0, Math.PI * 2, true);
		pctx.stroke();	// 绘画

		pctx.fillStyle = grd;
		pctx.beginPath();
		pctx.arc(0, 0, r, 0, Math.PI * 2, true);
		pctx.closePath();	// 闭合
		pctx.fill();

		for (let i = 0; i < 12; i++) {
			pctx.fillRect(-r / 30, -r * 1.1, r / 15, r * 1.1);
			pctx.rotate(Math.PI / 6);
		}

		pctx.lineWidth = r / 40;
		pctx.strokeStyle = "#3B3838";
		pctx.fillStyle = "#D1D1D1";	// 画笔色
		pctx.fillRect(-r / 3, r * 0.55, r * 2 / 3, r / 5);
		pctx.strokeRect(-r / 3, r * 0.55, r * 2 / 3, r / 5);
	}

	function getQueryVariable(variable) {
		var query = window.location.search.substring(1);
		var vars = query.split("&");
		for (var i = 0; i < vars.length; i++) {
			var pair = vars[i].split("=");
			if (pair[0] == variable) { return pair[1]; }
		}
		return (false);
	}
</script>

</html>